<template>
  <view class="product-list" v-if="list.length > 0">
    <view class="edit">
      <view class="text" @click="deleteCart">删除</view>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="content" v-if="item.product">
          <view class="checked">
            <u-checkbox-group @change="checkedItem(item)">
              <u-checkbox
                :checked="item.selected"
                :activeColor="activeColor"
                iconSize="16px"
                size="20px"
                shape="circle"
                label=" "
                labelSize="0"></u-checkbox>
            </u-checkbox-group>
          </view>
          <view class="image" @click="goProduct(item)">
            <v-image
              class="img"
              :url="item.sku.image.thumbnail_path"
              v-if="item.sku && item.sku.image"
              :width="'100rpx'"
              :height="'100rpx'" />
            <v-image
              class="img"
              :url="item.product.mainImage.thumbnail_path"
              v-else-if="item.product.mainImage"
              :width="'100rpx'"
              :height="'100rpx'" />
          </view>
          <view class="desc">
            <view class="title">{{ item.product.title }}</view>
            <!--<view class="sku" v-if="item.selected_sku_text">[ {{ JSON.parse(item.selected_sku_text).join(', ') }} ]</view>-->
            <view class="sku" v-if="item.selected_sku_text">
              <view class="u" v-for="(u, k) in buySku(item.selected_sku_text)" :key="k">{{u}}</view>
            </view>
            <view class="price">￥{{ item.price }}</view>
          </view>
          <view class="num-wrapper">
            <view class="num">
              <view class="sub" @click="decrement(item)">-</view>
              <input class="num" v-model="item.quantity" @blur="changeQuantity(item)" @change="changeQuantity(item)" />
              <view class="add" @click="increment(item)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Image from '../../../../components/image/index'
// import config from '../../../../config/config'
import color from '../../../../config/color'

export default {
  props: ['list'],
  components: {
    'v-image': Image
  },
  data() {
    return {
      activeColor: color.main_color
    }
  },
  methods: {
    // sku处理
    buySku(sku) {
      const list = JSON.parse(sku)
      return [...list]
    },
    // 减少
    decrement(item) {
      if (item.quantity - 1 > 0) {
        this.$emit('subQuantity', item)
      }
    },
    // 增加
    increment(item) {
      let stock = +item.product.stock
      if (item.sku) {
        stock = +item.sku.stock
      }
      if (item.quantity + 1 <= stock) {
        this.$emit('addQuantity', item)
      } else {
        uni.showToast({
          icon: 'none',
          title: '库存不足,最多可以选择数量为:' + stock
        })
      }
    },
    // 输入数量
    changeQuantity(item) {
      let stock = +item.product.stock
      if (item.sku) {
        stock = +item.sku.stock
      }
      if (isNaN(item.quantity) || item.quantity < 1) {
        return uni.showToast({
          icon: 'none',
          title: '数量错误'
        })
      }
      if (item.quantity > stock) {
        uni.showToast({
          icon: 'none',
          title: '库存不足,最多可以选择数量为:' + stock
        })
      }
      this.$emit('changeQuantity', item)
    },
    // 选择
    checkedItem(item) {
      this.$emit('checkedItem', item)
    },
    // 跳转商品
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.product.id}`
      })
    },
    // 删除
    deleteCart() {
      this.$emit('deleteCart')
    }
  },
  created() {
  }
}
</script>

<style scoped lang="scss">
// num 设置
$size: 26px;
$button: $size + 5px;

.product-list {
  margin: 20rpx;
  background: white;
  padding: 20rpx 0;
  border-radius: 10rpx;
  .edit {
    color: #666666;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .text {
      background: $main_color;
      color: white;
      padding: 5rpx 20rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      margin-right: 20rpx;
    }
  }
  .list {
    .item {
      //background: red;
      position: relative;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      padding: 20rpx 0;
      display: flex;
      flex-direction: column;
      /* 内容 */
      .content{
        display: flex;
        .checked {
          width: 80rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .image {
          width: 120rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .img {
            display: block;
          }
        }
        .desc {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .price, .sku, .num {
            height: 40rpx;
          }
          .price {
            color: red;
            font-size: 28rpx;
            font-weight: 700;
            margin-top: 10rpx;
          }
          .title {
            font-size: 26rpx;
            font-weight: 700;
          }
          .sku {
            overflow: hidden;
            margin: 10rpx 0;
            display: flex;
            .u {
              margin-right: 10rpx;
              font-size: 24rpx;
              color: #000000;
              background: #f3f5f7;
              display: inline-block;
              padding: 5rpx 10rpx;
              border-radius: 10rpx;
            }
          }
          .num {
            height: 50rpx;
            margin-top: -20rpx;
          }
        }
      }
      /* 数量 */
      .num-wrapper {
        position: absolute;
        right: 20rpx;
        bottom: 0;
        .num {
          display: flex;
          text-align: center;
          justify-content: center;
          align-items: center;
          .sub, .num, .add {
            border: 1px solid #dcdcdc;
            min-width: $size;
            height: $size;
            line-height: $size;
            font-size: 36rpx;
          }
          .sub, .add {
            min-width: $button;
            font-weight: 700;
          }
          .num {
            width: 40rpx;
            font-size: 28rpx;
          }
          .sub {
            border-right: none;
            border-top-left-radius: 20rpx;
            border-bottom-left-radius: 20rpx;
          }
          .add {
            border-left: none;
            border-top-right-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
          }
        }
      }
    }
  }
}
</style>
